{% extends "admin/change_list.html" %}
{% load i18n admin_static %}

{% block object-tools-items %}
  {{ block.super }}
  <li id="download-dialog">
    <el-link type="primary" @click="dialogVisible=true" style="background: none">导出论文统计</el-link>

    <el-dialog title="选择需要统计的年份和学院" :visible.sync="dialogVisible" width="400" :modal="false" center>
      <el-form :model="formInline" label-width="80px" size="mini" label-position="right" style="text-align: center">
        <el-form-item label="年份">
          <el-select v-model="formInline.year" placeholder="选择年份">
            <el-option v-for="option in years" :value="option">{{ option }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="formInline.academy" placeholder="选择学院">
            <el-option v-for="academy in academies" :value="academy.value" :label="academy.option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">导出</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </li>

  <style>
    .el-form-item__content {
      margin-left: 0 !important;
    }
  </style>
  <script type="text/javascript">
    if (document.getElementById('download-dialog')) {
      new Vue({
        el: '#download-dialog',
        data() {
          const options = [];
          const todayYear = new Date().getFullYear();
          for (let i = todayYear; i >= 2000; i -= 1) {
            options.push(i);
          }
          return {
            years: options,
            academies: [],
            dialogVisible: false,
            formInline: {
              year: '',
              academy: ''
            }
          };
        },
        created: function () {
          Vue.prototype.$http = axios;
          let _this = this;
          let academies = [];
          this.$http.get("{% url 'academy-list' %}", {})
              .then(function (res) {
                res.data.forEach(item => {
                    const {uuid, aca_cname} = item;
                    academies.push({"value": uuid, "option": aca_cname});
                });
                _this.academies = academies;
              })
              .catch(function (error) {
                _this.$notify.error({
                  title: '错误',
                  message: '导出过程中发生错误',
                });
              });
        },
        methods: {
          onSubmit() {
            Vue.prototype.$http = axios;
            let _this = this;
            let academies = [];
            let params = {
                year: _this.formInline.year,
                academy: _this.formInline.academy
            };
            this.$http.get("{% url 'paper-statistic' %}", {params: params, 'responseType': 'blob'})
                .then(function (res) {
                  if (res) {
                    const blob = new Blob([res.data], {type: res.headers['content-type']});
                    const fileName = `${_this.formInline.year}年研究生学位论文质量统计.xls`;
                    if ("download" in document.createElement("a")) {
                        // 非IE下载
                        const link = document.createElement("a");
                        link.download = fileName;
                        link.style.display = "none";
                        link.href = URL.createObjectURL(blob);
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href); // 释放URL 对象
                        document.body.removeChild(link);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, fileName);
                    }
                  }
                })
                .catch(function (error) {
                  _this.$notify.error({
                    title: '错误',
                    message: '导出过程中发生错误',
                  });
                });
          },
        }
      });
    }
  </script>
{% endblock %}